<template>
  <a-tabs tab-position="left" :active-key="activePane" type="card" @change="onChange">
    <a-tab-pane v-for="pane in panes" :key="pane.key" :tab="pane.title" :closable="pane.closable">
      <TaskList :key="pane.content" :contentData="pane.content" :boards="getBoards"/>
    </a-tab-pane>
    <template #renderTabBar="{ DefaultTabBar, ...props }">
      <component :is="DefaultTabBar" v-bind="props" :style="{ width: '180px' }" />
    </template>
  </a-tabs>
  <a-button @click="newTask" size="middle" style="position: absolute; bottom: 50px;">新建任务板</a-button>
  <TaskModal :board="''" :mVisible="modalVisible" :closeModal="closeModal" :boards="getBoards" />
</template>
<script>
import { defineComponent, ref } from 'vue';
import TaskList from "./TaskList.vue";
import { mapMutations, mapState } from "vuex";
import TaskModal from "./TaskModal.vue";

export default defineComponent({
  setup() {
    const modalVisible = ref(false);
    let timer = 0;
    let interval = 0;
    return {
      modalVisible,
      timer,
      interval
    }
  },
  components: {
    TaskList,
    TaskModal
  },
  mounted() {
    this.timeTask();
  },
  unmounted() {
    clearTimeout(this.timer);
    clearInterval(this.interval);
  },
  methods: {
    onChange(activeKey) {
      this.setActivePane(activeKey);
    },
    ...mapMutations('panes', [
      'setActivePane'
    ]),
    newTask() {
      this.modalVisible = true;
    },
    closeModal() {
      this.modalVisible = false;
    },
    timeTask() {
      const ONE_DAY =  24 * 60 * 60 * 1000;
      const nowTime = new Date().getTime();
      const runTime = new Date().setHours(0, 0, 0) + ONE_DAY;
      const timeInterval = runTime - nowTime;
      this.timer = setTimeout(() => {
        this.$store.dispatch('panes/getTaskData');
      }, timeInterval);
      this.interval = setInterval(() => {
        this.$store.dispatch('panes/getTaskData');
      }, ONE_DAY);
    }
  },
  computed: mapState({
    getBoards() {
      const boards = []
      this.panes.forEach((value) => {
        boards.push(value.key);
      })
      return boards;
    },
    panes: state => state.panes.panes,
    activePane: state => state.panes.activePane
  }),
  created() {
    this.$store.dispatch('panes/getTaskData');
  }
});
</script>